<script setup lang="ts">
import { computed, ref } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

// computed 只读写法 readonLy
// const fullName = computed(()=>{
//   return firstName.value + '' + lastName.value
// })

// computed 可读可写（完整写法） get set 对象形式
const fullName = computed({
  get(){
       // 获取 firstName 和 lastName，中间添加空格
    return firstName.value + '' + lastName.value
  },
  set(value){
     // 把输入框的 value 按空格拆分成 firstName 和 lastName
    const names = value.split(' ')
    firstName.value = names[0]
    lastName.value = names[1]
  }
})



</script>


<template>
  <input type="text" v-model="firstName">
  <input type="text" v-model="lastName">
  <p>完整姓名</p>
  <input type="text" v-model="fullName">
  <button></button>
</template>

